<!--
 * @Author: your name
 * @Date: 2021-12-16 15:51:40
 * @LastEditTime: 2021-12-16 17:20:00
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \vue-admin-template\src\pages\Equipment.vue
-->
<template>
  <div class="user_container">
    <!-- 第一行 -->
    <el-row>
      <el-col :span="12">
        <el-form :model="params" inline size="small">
          <el-form-item>
            <el-input v-model="params.username"></el-input>
          </el-form-item>
           <el-form-item>
            <el-button>搜索</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="12" style="text-align:right">
        <el-button type="primary" size="small" @click="toAddHandler">添加</el-button>
      </el-col>
    </el-row>
    <!--/第一行结束  -->
    <!-- 第二行 -->
    <el-table size="small" :data="users" stripe>
      <el-table-column label="编号" prop="id"></el-table-column>
      <el-table-column label="设备名" prop="username"></el-table-column>
      <el-table-column label="维护" prop=""></el-table-column>
      <el-table-column label="报修" prop=""></el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="text" size="mini" @click="toEditHandler(scope.row)">修改</el-button>
          <el-button type="text" size="mini" @click="toDelHandler(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- /第二行结束 -->
    <!-- 第三行 -->
    <el-pagination layout="prev, pager, next" :total="50"> </el-pagination>
    <!-- /第三行结束 -->
    <!-- 第四行模态框 -->
    <el-dialog :title="title" :visible.sync="visible">
      <el-form :model="form"  label-width="80px">
        <el-form-item label="设备名">
          <el-input v-model="form.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="form.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="提交">
          <el-select v-model="form.gender" placeholder="请选择服务">
            <el-option label="报修" value="male"></el-option>
            <el-option label="维护" value="female"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="visible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="visible = false"  size="small">确 定</el-button>
      </div>
    </el-dialog>
    <!-- /第四行结束 -->
  </div>
</template>
<script>
export default {
  // 1. 数据，变量： 函数，并且返回一个对象，声明的变量都要放在返回的对象中。
  data(){
    return {
      title:"",
      visible:false,
      params:{},
      form:{},
      users:[{id:1,username:"top"},{id:2,username:"mid"},{id:3,username:"end"}]
    }
  },
  // 2. 方法
  methods:{
    add(){
            this.equipments.push(this.newEquipment);
            this.newEquipment={}
        },
    del(){
            this.equipments.splice(this.flag, 1);
        },
   setFlag(index){
            this.flag = index;
        },
    clear(){
            this.equipments=[]
            }

  }
}
</script>
<style scoped>
.user_container {
  padding:1em .5em;
}
</style>